<template>
	<div style="width: 1200px;margin:0px auto">
		<!-- 1、轮播图 暂时固定图片，后期图片资源从后端调取 -->
		<el-carousel height="350px" :interval="2000">
			<el-carousel-item>
				<img src="/imgs/banner1.jpg" width="100%" alt="" />
			</el-carousel-item>
			<el-carousel-item>
				<img src="/imgs/banner2.jpg" width="100%" alt="" />
			</el-carousel-item>
			<el-carousel-item>
				<img src="/imgs/banner3.jpg" width="100%" alt="" />
			</el-carousel-item>
		</el-carousel>
		<!-- 烘焙食谱导航条 -->
		<el-row>
			<el-col :span="3">
				<p style="font-size: 28px;margin:15px">烘焙食谱</p>
			</el-col>
			<el-col :span="21">
				<el-menu class="el-menu-demo" mode="horizontal" active-text-color="orange">
					<el-menu-item index="0">全部</el-menu-item>
					<el-menu-item index="1">面包</el-menu-item>
					<el-menu-item index="2">家常菜</el-menu-item>
					<el-menu-item index="3">小食</el-menu-item>
				</el-menu>
			</el-col>
		</el-row>
		<!-- 食谱列表，卡片布局 -->
		<el-row :gutter="10">
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<!-- 加载更多 -->
		<div style="width: 1200px; margin: 10px auto; ">
			<el-button>点击加载更多...</el-button>
		</div>
		<!-- 烘焙视频 -->
		<el-row>
			<el-col :span="3">
				<p style="font-size: 28px;margin:15px">烘焙视频</p>
			</el-col>
			<el-col :span="21">
				<el-menu class="el-menu-demo" mode="horizontal" active-text-color="orange">
					<el-menu-item index="0">全部</el-menu-item>
					<el-menu-item index="2">家常菜教学</el-menu-item>
					<el-menu-item index="3">美食欣赏</el-menu-item>
				</el-menu>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<!-- 加载更多 -->
		<div style="width: 1200px; margin: 10px auto; ">
			<el-button>点击加载更多...</el-button>
		</div>
		<!-- 资讯导航条 -->
		<el-row>
			<el-col :span="3">
				<p style="font-size: 28px;margin:15px">行业资讯</p>
			</el-col>
			<el-col :span="21">
				<el-menu class="el-menu-demo" mode="horizontal" active-text-color="orange">
					<el-menu-item index="0">全部</el-menu-item>
					<el-menu-item index="1">美食资讯</el-menu-item>
					<el-menu-item index="2">店家资讯</el-menu-item>
					
				</el-menu>
			</el-col>
		</el-row>
		<el-row :gutter="10">
		
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<router-link to="/" style="text-decoration: none;color: black;">
						<img src="/imgs/baker1.jpg" width="100%" height="150px" alt="">
						<p style="text-align:left;height:40px;">小面包</p>
					</router-link>
					
					<el-row>
						<el-col :span="4">
							<el-avatar size="small" src="/imgs/reg.png"></el-avatar>
						</el-col>
						<el-col :span="10">
							<span style="float: left;">杨老师</span>
						</el-col>
						<el-col :span="10">
							<span style="float: right;">面包</span>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<!-- 加载更多 -->
		<div style="width: 1200px; margin: 10px auto; ">
			<el-button>点击加载更多...</el-button>
		</div>
	</div>
</template>

<script>



</script>

<style>
</style>